<template>
  <el-row class="container">

    <div class="slide">
      <div class="logo">
        <img src="../assets/images/logo.png" alt="">
      </div>
      <div class="menu-container">
        <el-menu
          :default-active="$route.path"
          router
          unique-opened
        >
          <template v-for="(item,index) in routes" v-if="!item.hidden && authMenu(item)">
            <!--有多个节点-->
            <el-submenu
              :index="index+''"
              v-if="!item.leaf"
              :key="index"
            >
              <template slot="title">
                <div class="menu-title">
                  <img :src="require(`../assets/images/${item.icon}`)" alt="">
                  <span slot="title">{{item.name}}</span>
                </div>
              </template>
              <el-menu-item
                v-for="child in item.children"
                :index="child.path" :key="child.path"
                v-if="!child.hidden && authMenu(item)"
              >
                <div @click.stop="routerTo(child)">
                  <div class="menu-title">
                    <img :src="require(`../assets/images/${child.icon}`)" alt="">
                    <span slot="title">{{child.name}}</span>
                  </div>
                </div>
              </el-menu-item>
            </el-submenu>

            <!--只有一个节点-->
            <el-menu-item
              v-if="item.leaf"
              :index="item.children[0].path"
              :key="index">
              <div class="menu-title" @click.stop="routerTo(item.children[0])">
                <img :src="require(`../assets/images/${item.icon}`)" alt="">
                <span slot="title">{{item.name}}</span>
              </div>
            </el-menu-item>

          </template>
        </el-menu>
      </div>
    </div>

    <section class="content-container">
      <div class="navbar">
        <div class="breadcrumb-container">
          <span class="el-icon-s-fold"></span>
          <span class="title">当前位置：</span>
          <div>{{breadcrumb()}}</div>
        </div>
        <div class="username">
          <!-- <img src="" alt="" class="avatar"> -->
          <i class="el-icon-user avatar"></i>
          <span>欢迎你，{{user.name}}</span>
          <div @click="logout">
            <img src="../assets/images/exit.png" alt="" class="logout">
          </div>
        </div>
      </div>

      <el-col :span="24" class="content-wrapper" id="content-wrapper" >
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </el-col>
    </section>

    <!--        <div class="footer">-->
    <!--          <div class="pull-right">-->
    <!--            By：<a href="" target="_blank"></a>-->
    <!--          </div>-->
    <!--          <div>-->
    <!--            <strong>Copyright</strong>  © 2019-->
    <!--          </div>-->
    <!--        </div>-->
  </el-row>
</template>
<script>
  export default {
    components: {},
    data () {
      return {
        routes: this.$router.options.routes,
        user: sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {},
        permissions: sessionStorage.getItem('permission') ? sessionStorage.getItem('permission').split(',') : []
      }
    },
    mounted () {
      
    },
    watch: {},
    methods: {
      breadcrumb () {
        const matched = this.$route.matched
        return matched.map(item => item.name).filter(name => !!name).join(' > ')
      },
      routerTo (menu) {
        console.log(menu)
        this.$router.push(menu.children && menu.children.length ? menu.children[0].path : menu.path)
      },
      authMenu (menu) {
        // const {meta = {}} = menu
        // const powerId = meta.powerId
        // return this.permissions.includes(powerId)
        return true
      },
      logout () {
        const self = this
        self.$get('/api/security/logout').then(res => {
          sessionStorage.setItem('user', '')
          sessionStorage.setItem('permission', '')
          self.afterLogout()
        })
      },
      afterLogout () {
        const self = this
        const env = process.env.NODE_ENV
        if (['development', 'preview'].includes(env)) {
          location.hash = '/login'
        } else {
          self.$get('/api/security/info').then(res => {
            const logoutApi = res.logoutUrl
            self.$get(logoutApi).then(res => {
              location.href = res
            })
          })
        }
      }
    }
  }
</script>
<style scoped lang="less">
 @import '../assets/style/base/themeColor';

  .container {
    display: flex;
    flex-direction: row;

    .slide {
      position: relative;
      height: 100vh;
    
      width: 185px;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;

      .logo {
        position: fixed;
        width: 185px;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
       

        img {
          // width: 75px;
          // height: 50px;
          width: 75%;
        }
      }

      .menu-container {
        flex: 1;
        border-radius: 0;
        text-align: left;
        overflow-x: hidden;
        // width: 100%;
        font-size: 14px;
        position: fixed;
        top:96px;
        width: 186px;

        .el-menu {
          width: 100%;

          .menu-title {
            display: flex;
            flex-direction: row;
            align-items: center;

            img {
              width: 20px;
              height: 20px;
            }

            span {
              margin-left: 10px;
            }
          }
        }
      }
    }

    .content-container {
      background: #ececec;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .navbar {
        background: #fff;
        height: 50px;
        width: 100%;
        display: flex;
        flex: 0 0 50px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;

        .breadcrumb-container {
          margin: 0 0 0 20px;
          display: flex;
          flex-direction: row;
          align-items: center;
          flex: 1;

          .title {
            color: #475669;
            margin: 0 10px;
          }

          div {
            font-size: 12px;
          }
        }

        .username {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin: 0 20px 0 0;

          .avatar {
            // width: 15px;
            // height: 15px;
            // border: 1px solid @themeColor;
            margin: 0 6px 0 0;
            // border-radius: 7.5px;
            font-size: 18px;
          }

          span {
            margin: 0 10px 0 0;
          }

          .logout {
            width: 15px;
            height: 15px;
            cursor: pointer;
          }
        }
      }

      .content-wrapper {
        height: 100%;
        box-sizing: border-box;
        padding: 10px;
        flex: 1;
        overflow: hidden;
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 185px;
    right: 0;
    background: none repeat scroll 0 0 #fff;
    border-top: 1px solid #e7eaec;
    overflow: hidden;
    padding: 10px 20px;
    margin: 0;
    height: 15px;
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;

    a {
      color: #337ab7;
    }
  }

    .menu-title {
      color: @themeColor
    }
</style>
